<script lang="ts" setup>
defineOptions({
  name: "HomeDragUp",
});
import { getImg } from "@/utils";
</script>
<template>
  <div class="home-drag-up">
    <img :src="getImg('uparrow@2x.png')" alt="" />
    <div class="flex">
      <div class="start"></div>
      <div class="center">{{ $t("title09") }}</div>
      <div class="end"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home-drag-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    width: 100%;

    .start {
      width: 40%;
      border-radius: 0px 0px 0px 0px;
      border: 2px solid;
      border-image: linear-gradient(
          270deg,
          rgba(200, 200, 200, 0),
          rgb(49, 164, 255)
        )
        2 2;
    }
    .center {
      text-align: center;
    }
    .end {
      width: 40%;
      border-radius: 0px 0px 0px 0px;
      border: 2px solid;
      border-image: linear-gradient(
          270deg,
          rgb(49, 164, 255),
          rgba(200, 200, 200, 0)
        )
        2 2;
    }
  }
}
</style>
